import { h, Component } from 'preact';
import s from './style';
import classNames from 'classnames';

export default class Clip extends Component {
	constructor() {
		super();
		this.state = {
			flash: false
		};
	}
	componentDidMount(){
		this.clip.removeEventListener(window.TransitionEvent, this.flash);
		this.clip.addEventListener(window.TransitionEvent, this.flash);
	}
	flash = () => {
		this.setState({
			flash: true
		});
	}

	render() {
		const { grab } = this.props;
		const { flash } = this.state;
		const grabClass = classNames({
			[s.slidedown] : grab
		},
		s.Clip);
		const flashClass = classNames({
			[s.flash] : flash
		},
		s.goldLight);
		const giftClass = classNames({
			[s.giftflash] : flash
		},
		s.grabGift);
		return (
			<div className={s.container}>
			  <div className={s.ClipBox}>
				<div className={grabClass} ref={ref => { this.clip = ref; }} >
					<div className={flashClass}></div>
					<div className={giftClass}></div>
				  <div className={s.LClip}></div>
				  <div className={s.RClip}></div>
				  <div className={s.ClipHeader}></div>
				</div>
			  </div>
			</div>
		);
	}
}
